<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>DeathGhost-用户中心</title>
    <meta name="keywords" content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发"/>
    <meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!"/>
    <meta name="author" content="DeathGhost"/>
    <link href="/style/style.css" rel="stylesheet" type="text/css"/>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script type="text/javascript" src="/js/public.js"></script>
    <script type="text/javascript" src="/js/jquery.js"></script>
       <script type="text/javascript" src="/js/jqpublic.js"></script>
     <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script src="/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function goPage(p) {
            /*alert(p);*/
            document.getElementById('p').value = p;
            let form1 = document.getElementById('form1');
            form1.submit();
        }
    </script>



</head>
<body>
<header class="header">


</header>
<script>

    $('.header').load('/header.html', function (responseTxt, statusTxt, xhr) {


    })
    $(function () {
        //Demo
        layui.use('form', function(){
            var form = layui.form;

            //监听提交
            form.on('submit(formDemo)', function(data){
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
        $('.menu1').load('/menu.html', function (responseTxt, statusTxt, xhr) {
            console.log('responseTxt,statusTxt,xhr')

        })
    })
</script>
<!--Start content-->
<section class="Psection MT20">
    <nav class="menu1">

    </nav>
    <article class="U-article Overflow">
        <!--user order list-->
        <section>
            <table class="Myorder" id="orderlist">
                <th class="Font14 FontW">订单编号</th>
                <th class="Font14 FontW">下单时间</th>
                <th class="Font14 FontW">收件人</th>
                <th class="Font14 FontW">订单总金额</th>
                <th class="Font14 FontW">订单状态</th>
                <th class="Font14 FontW">操作</th>
                <th class="Font14 FontW">评价</th>

               <tr th:each="order:${page.records}">
                 <td class="FontW"><a th:href="user_order.html" th:text="${order.getOrderNum()}"></a></td>
                 <td th:text="${order.getOrderTime()}"></td>
                 <td th:text="${order.getReciever()}"></td>
                 <td th:text="'￥'+${order.getPrice()}"></td>
                 <!--  <td><label th:text="${order.getStatus()}"></label></td>-->
                 <td th:if="${order.getStatus() eq '1'}" th:text="未付款"></td>
                 <td th:if="${order.getStatus() eq '2'}" th:text="已付款"></td>
                 <td th:if="${order.getStatus() eq '3'}" th:text="代发货"></td>
                 <td th:if="${order.getStatus() eq '4'}" th:text="已发货"></td>
                 <td th:if="${order.getStatus() eq '5'}" th:text="已签收"></td>
                 <td th:if="${order.getStatus() eq '6'}" th:text="待评价"></td>
                 <td th:if="${order.getStatus() eq '7'}" th:text="已评价"></td>
                 <td th:if="${order.getStatus() eq '8'}" th:text="取消订单"></td>
                <td><a th:href="@{/order/del(id=${order.getId()})}">取消订单</a> | <a th:href="@{/order/pay(id=${order.getId()})}">付款</a></td>
                   <td><input th:if="${order.getIsReview() ne '1'}" type="button" th:onclick="'review(\''+${order.id}+'\')'" value="请评价">
                       <input th:if="${order.getIsReview()  eq '1'}" type="button" th:name="${order.id}" th:@click="|show_review(${order.id})|" value="查看评价">
                       <!--展示评价弹框-->
                       <form class="layui-form" id="show_review"  style="display:none" action="/order/review" method="post">
                           <div class="layui-form-item">
                               <label class="layui-form-label">评分</label>
                               <div class="layui-input-block">
                                   <input readonly type="text" name="score" required  lay-verify="required" :value="review.score" autocomplete="on" class="layui-input" id="" style="width:100px">
                               </div>
                           </div>


                           <div class="layui-form-item layui-form-text">
                               <label class="layui-form-label" >评价内容</label>
                               <div class="layui-input-block">
                                   <textarea readonly lay-verify="required" name="desc"  class="layui-textarea">{{review.comment}}</textarea>
                               </div>
                           </div>
                       </form>
                   </td>

                </tr>

            </table>
            <form method="get" th:action="@{/order/list}" id="form1">
            <input type="hidden" name="current" value="1" id="p">
            </form>
            <div class="TurnPage">
               <a th:onclick="goPage(1)"class="Prev" >首页</a>
                <a th:each="p:${#numbers.sequence(1,page.pages)}" th:text="${p}" th:onclick="'goPage(\''+${p}+'\')'" class="PNumber"></a>
               <a th:onclick="'goPage(\''+${page.pages}+'\')'" class="Next" >最后一页</a>
            </div>

        </section>
    </article>
</section>

<footer>
    <section class="Otherlink">
        <aside>
            <div class="ewm-left">
                <p>手机扫描二维码：</p>
                <img src="/images/Android_ico_d.gif">
                <img src="/images/iphone_ico_d.gif">
            </div>
            <div class="tips">
                <p>客服热线</p>
                <p><i>1830927**73</i></p>
                <p>配送时间</p>
                <p>
                    <time>09：00</time>
                    ~
                    <time>22:00</time>
                </p>
                <p>网站公告</p>
            </div>
        </aside>
        <section>
            <div>
                <span><i class="i1"></i>配送支付</span>
                <ul>
                    <li><a th:href="article_read.html" target="_blank" title="标题">支付方式</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">配送方式</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">服务费用</a></li>
                </ul>
            </div>
            <div>
                <span><i class="i2"></i>关于我们</span>
                <ul>
                    <li><a th:href="article_read.html" target="_blank" title="标题">招贤纳士</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">网站介绍</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">商家加盟</a></li>
                </ul>
            </div>
            <div>
                <span><i class="i3"></i>帮助中心</span>
                <ul>
                    <li><a th:href="article_read.html" target="_blank" title="标题">服务内容</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">服务介绍</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">常见问题</a></li>
                    <li><a th:href="article_read.html" target="_blank" title="标题">网站地图</a></li>
                </ul>
            </div>
        </section>
    </section>
    <div class="copyright">© 版权所有 2016 DeathGhost 技术支持：<a href="http://www.deathghost.cn"
                                                          title="DeathGhost">DeathGhost</a></div>
</footer>
<!--评价弹框位置-->
<form class="layui-form" id="test" style="display:none" action="/order/review" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">评分</label>
        <div class="layui-input-block">
            <input type="text" name="score" required  lay-verify="required" placeholder="1-100分" autocomplete="on" class="layui-input" id="username" style="width:100px">
            <input type="hidden" name="orderId" id="orderId" value="" >
            <span text=""></span>
        </div>
    </div>


    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label" >评价内容</label>
        <div class="layui-input-block">
            <textarea lay-verify="required" name="desc" placeholder="请输入评价内容" class="layui-textarea"></textarea>
        </div>
    </div>
</form>




</body>
<script>
    function review(orderId){

        layer.open({
            type:1,
            area:["500px","400px"],
            title: '评价'
            ,content: $("#test"),
            shade: 0,
            btn: ['提交', '重置']
            ,btn1: function(index, layero){
                alert(orderId)
                $("#orderId").val(orderId);
                $("#test").submit();
            },
            btn2: function(index, layero){
                $("#test")[0].reset();
                return false;
            },
            cancel: function(layero,index){
                layer.closeAll();
            }

        });
    }




    new Vue({
        el: "#orderlist",
        data:{
            review
        },

        methods: {
            /**
             * 根据orderId查看评论
             */
            show_review(orderId){


                axios.get("/order/showReview?orderId="+orderId).then(r => {
                    if (r.data.code === 200) {
                        this.review = r.data.data;
                        console.log(this.review);

                        layer.open({
                            type:1,
                            area:["500px","400px"],
                            title: '评价'
                            ,content: $("#show_review"),
                            shade: 0,
                            cancel: function(layero,index){
                                $("#show_review").attr("style","display:none");
                                layer.closeAll();
                            }


                        });

                    }
                })
            },

            //去除地区条件返回原始商铺列表
            getDefault(){
                axios.get("/shop/shopList?current=1").then(r => {
                    if (r.data.code === 200) {
                        this.page = r.data.data[1];
                    }
                })
            }
        },



        mounted: function () {

        }
    });



</script>
</html>
